<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>地址管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script type="text/javascript" src="js/address.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

	</head>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="input-group">
						<h3>
							<span class="glyphicon glyphicon-send" aria-hidden="true">	
								收货地址
							</span>
						</h3>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<font color="#FF0000">新增收货地址</font>
					<div class="table-responsive">
						<table class="table " id="address_add" >
							<tbody>
								<tr class="odd gradeC">
									<td>
										<font color="red">*</font>收货人姓名 &nbsp;&nbsp;&nbsp;&nbsp;
										<input type="text" id="name" name="name" placeholder="长度不超过25个字符"></td>
								</tr>

								<tr class="even gradeC">
									&nbsp;&nbsp;
									<td>邮政编码 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input type="text" id="postcode" name="postcode" placeholder="如不清楚请填写000000">
									</td>
								</tr>
								<tr class="even gradeC">
									<td>
										<font color="red">*</font>联系电话&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input type="text" id="mobile" name="mobile" placeholder="请填写正确的手机号">
									</td>
								</tr>

								<tr class="even gradeC">
									<td>
										<font color="red">*</font>详细地址 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<textarea id="address" name="address" rows="5" cols="50" style="vertical-align:top" placeholder="建议您如实填写详细收货地址，如街道名称，门牌号码，楼层和房间号等信息"></textarea>
									</td>
								</tr>

								<tr class="even gradeC">
									<td>
										<input type="submit" value="保存" id="save_address" name="save_address" class="btn btn-warning" onclick ="return isNull();">

									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<!-- 分类列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						<font color="#FF0000">收货地址列表</font>

					</div>
					<div class="panel-body">

						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div class="table-responsive">
							<table class="table table-striped table-bordered table-hover" id="address" name="address">
								<thead>
									<tr>
										<th>收货人姓名</th>
										<th>详细地址</th>
										<th>邮编</th>
										<th>联系电话</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr class="odd gradeX">
										<td>张三</td>
										<td>河北省唐山市xx县xx小区xx单元xxx</td>
										<td>063000</td>
										<td>138****1234</td>
										<td>
											<a id="modify" title="修改" class="t-edit glyphicon glyphicon-pencil" href="#" onclick="update()"></a> &nbsp&nbsp&nbsp
											<a id="delete" title="删除" class="t-del glyphicon glyphicon-trash"></a>
										</td>

									</tr>
									<tr class="even gradeC">
										<td>李四</td>
										<td>河北省唐山市xx县xx小区xx单元xxx</td>
										<td>063000</td>
										<td>138****1234</td>
										<td>
											<a title="修改" class="t-edit glyphicon glyphicon-pencil" href="#" onclick="update()"></a> &nbsp&nbsp&nbsp
											<a title="删除" class="t-del glyphicon glyphicon-trash" onclick="delete()"></a>
										</td>

									</tr>
									<tr class="even gradeC">
										<td>王五</td>
										<td>河北省唐山市xx县xx小区xx单元xxx</td>
										<td>063000</td>
										<td>138****1234</td>
										<td>
											<a title="修改" class="t-edit glyphicon glyphicon-pencil" href="#" onclick="update()"></a> &nbsp&nbsp&nbsp
											<a title="删除" class="t-del glyphicon glyphicon-trash"></a>
										</td>

									</tr>
									<tr class="even gradeC">
										<td>赵六</td>
										<td>河北省唐山市xx县xx小区xx单元xxx</td>
										<td>063000</td>
										<td>138****1234</td>
										<td>
											<a title="修改" class="t-edit glyphicon glyphicon-pencil" href="#" onclick="update()"></a> &nbsp&nbsp&nbsp
											<a title="删除" class="t-del glyphicon glyphicon-trash" onclick="delete()"></a>
										</td>

									</tr>
								</tbody>
							</table>
						</div>

						<!--</div>-->
					</div>
				</div>
				<!--表格结束 -->
			</div>
		</div>
		<script type="text/javascript">
			function isNull() {
				var name = document.getElementById("name").value; //通过id获取需要验证的表单元素的值
				var mobile = document.getElementById("mobile").value;
				var address = document.getElementById("address").value;
				if(name == "") { //当上面获取的值为空时
					alert("收货人姓名不能为空哦！"); //弹出提示
					return false; //返回false（不提交表单）
				}
				if(mobile == "") { 
					alert("联系电话不能为空哦！"); 
					return false; 
				}
				if(address == "") { 
					alert("详细信息不能为空哦！"); 
					return false; 
				}
				
				return true; //提交表单
			}
		</script>

	</body>

</html>